<template>
    <div>
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">电子发票</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="dialog__Einv--div">

            <group>

                <tab style="margin: 0 10px;">
                    <tab-item @on-item-click="onItemClick" selected> 个人</tab-item>
                    <tab-item @on-item-click="onItemClick">企业</tab-item>
                </tab>
                <div class="order__formPolicy">
                    <div class="checked__class">
                        <label><input style="margin-right: 15px;" id="initInsure" v-model="insureType" checked type="radio" value="1" />投保人 </label>
                        <label><input style="margin-right: 15px;" v-model="insureType" type="radio" value="2" />被保险人 </label>
                    </div>
                    <x-input class="base-input_font" :readonly="isInvoice" v-model="einvForm.invoiceTitle" placeholder="发票抬头">
                        <div class="common__input einv_input" slot="label">
                            发票抬头&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" readonly v-model="order.findEinvData.Policyno" placeholder="">
                        <div class="common__input einv_input" slot="label">
                            保单号&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" readonly v-model="order.findEinvData.RiskName" placeholder="">
                        <div class="common__input einv_input" slot="label">
                            险种名称&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" readonly v-model="order.findEinvData.PlanFeeCNY" placeholder="">
                        <div class="common__input einv_input" slot="label">
                            发票金额&nbsp&nbsp
                        </div>
                    </x-input>
                </div>
                <div v-show="type" class="order__formPolicy">
                    <x-input class="base-input_font" v-model="einvForm.emailAddress" placeholder="电子邮件  (收取电子发票)" is-type="email">
                        <div class="common__input " slot="label">
                            <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                </div>
                <div v-show="!type" class="order__formPolicy">
                    <x-input class="base-input_font" v-model="einvForm.emailAddress" placeholder="电子邮件  (收取电子发票)" is-type="email">
                        <div class="common__input" slot="label">
                            <img src="~assets/x3/ico/icon-email.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" v-model="einvForm.taxPayerno" :max="18" @on-blur="onBlur" required placeholder="税务登记号">
                        <div class="common__input " slot="label">
                            <img src="~assets/x3/ico/icon_swdjh.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                    <x-input class="base-input_font" v-model="einvForm.phone" placeholder="客户电话">
                        <div class="common__input " slot="label">
                            <img src="~assets/x3/ico/icon-dh.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                    <x-input class="base-input_font" v-model="einvForm.address" placeholder="客户地址">
                        <div class="common__input " slot="label">
                            <img src="~assets/x3/ico/icon-addre.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                    <x-input class="base-input_font" v-model="einvForm.payeeBank" placeholder="税局备案开户行">
                        <div class="common__input " slot="label">
                            <img src="~assets/x3/ico/icon-khh.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>

                    <x-input class="base-input_font" v-model="einvForm.payeeAccount" placeholder="税局备案开户账号">
                        <div class="common__input" slot="label">
                            <img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp
                        </div>
                    </x-input>
                </div>
            </group>
            <div v-if="haveError" class="common_errorMsg">
                <badge text="!"></badge>
                <span>{{errorMessage}}</span>
            </div>
        </div>
        <div class="einv-btn">

            <x-button @click.native="sendEinvPrintData(2)" mini type="primary">下载</x-button>
            <!-- <x-button @click.native="close()" mini>取消</x-button> -->
        </div>
    </div>
</template>
<script>
import Validation from "src/common/util/validation";
import vueScroller from 'src/common/vueScroller/components/Scroller';
import Config from 'src/common/config/orderConfig';
import DateUtil from 'src/common/util/dateUtil';
import { RequestUrl } from 'src/common/url';
import { XHeader, XTable, Cell, Group, Badge, ButtonTab, ButtonTabItem, Divider, Checker, XDialog, XButton, TransferDomDirective as TransferDom, XInput, Tab, TabItem, CheckerItem, Toast } from 'vux'
import { mapState, mapActions } from 'vuex';
import { Mutations, RouteUrl } from 'src/common/const';;
export default {
    components: {
        XInput,
        Group,
        XDialog,
        XButton,
        TransferDom,
        vueScroller,
        XHeader,
        Cell,
        Badge,
        ButtonTab,
        ButtonTabItem,
        Divider,
        XTable,
        Checker,
        Tab,
        TabItem,
        CheckerItem,
        Toast
    },
    computed: mapState([
        'order',
        "isWeChar"
    ]),
    data() {
        return {
            isSucess: false,
            haveError: false,
            errorMessage: '',
            einvForm: {
                certiNo: '',  //业务号  保批单号
                taxPayerno: '', //纳锐人识别号 
                emailAddress: '',//邮箱地址
                address: "", // 地址
                phone: '', //电话
                payeeBank: '', //银行名称
                payeeAccount: '', //银行帐号
                invoiceTitle: '',  //发票抬头
                riskCode: '', //险种代码
                isModify: '1',  //是否修改抬头
                isMotorUi: '1',  //数据来源
                invoiceType: '1', //发票类型
            },
            seleOrder: {},
            type: true,   //选择类型  个人 false 企业
            insureType: "1",
            isInvoice: false,
            isQuery: false,
        }
    },
    watch: {
        insureType(cur, old) {
            if (cur == "1") {
                this.invoiceType = '0';
                this.einvForm.invoiceTitle = this.order.findEinvData.AppliName;
            } else {
                this.invoiceType = '1';
                this.einvForm.invoiceTitle = this.order.findEinvData.InsuredName;
            }
        }
    },
    filters: {
        dateFormat(value) {
            return DateUtil.getDateStr_YmdByTs(value);
        },
        orderState(index) {
            return Config.getOrderState(index);
        }
    },
    computed: mapState({
        order: "order"
    }),
    methods: {
        onBlur(val) {
            if (val != "") {
                if (val.length != 18) {
                    return this.showErrorMsg("税务登记号为18位数！");
                }
            }
        },
        onItemClick(index) {
            if (index == 0) {
                this.type = true;
            } else {
                this.type = false;
            }
        },
        showErrorMsg(errorMsg) {
            this.$vux.alert.show({
                title: "提示",
                content: errorMsg
            });
            setTimeout(() => {
                this.$vux.alert.hide();
            }, 3000);
            return false;
        },
        sendEinvPrintData(type) {
            $('.weui-input').focus();
            $('.weui-input').blur();
            let _this = this;
            // if (this.einvForm.taxPayerno != '') {
            // this.einvForm.
            // this.einvForm.certiNo = this.order.seleOrder.policyNo;
            // this.einvForm.certiNo = "8831055010170000049000";
            if (this.einvForm.taxPayerno != "") {
                if (this.einvForm.taxPayerno.length != 18) {
                    return this.showErrorMsg("税务登记号为18位数！");
                }
            }
            if (this.einvForm.emailAddress != "") {
                if (!Validation.isEmail(this.einvForm.emailAddress.toLowerCase())) {
                    return this.showErrorMsg("投保邮箱格式不正确");
                }
            }
            if (!this.isQuery) {
                this.isQuery = true;
                this.einvForm.certiNo = this.order.findEinvData.Policyno;
                this.einvForm.riskCode = this.order.seleOrder.riskCode;
                this.$common.storeCommit(this, Mutations.UPDATE_LOADING_STATUS, true);
                this.$http.post(RequestUrl.SEND_EINV_PRINT_DATA, this.einvForm)
                    .then(function (res) {
                        // _this.isQuery = false;
                        if (res.resCode == '000') {
                            // _this.showEinv = false;
                            _this.$common.downloadfile(res.result.pdfUrl, "电子发票", _this);
                            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                            _this.$common.goBack(_this);
                            // let pdfUrl = res.result.pdfUrl;
                            // window.location.href = res.result.pdfUrl;
                            //res.result.errorMsg "电子发票开具成功,发票代码：050001500111,发票号：58290727"    
                        } else {
                            _this.$common.storeCommit(_this, Mutations.UPDATE_LOADING_STATUS, false);
                            _this.haveError = true;
                            _this.errorMessage = res.result;
                            //res.result
                            //" 错误详情：没有初始化该税号，或初始化的该纳税人名称为空↵"
                        }

                    })
            }
            // }
        },
        close() {
            this.$common.storeCommit(this, Mutations.ORDER_SET_SHOW_EINV, false);
        },
        goBack() {
            this.$common.goBack(this);
        },
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["EINV_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        // alert(typeof (sessionStorage["test"]));
        // if (sessionStorage["INSURE_FORM_URL"] == "/"&&typeof (sessionStorage["INSURE_DATA"])!="undefined") {

        // }else 
        if (sessionStorage["EINV_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.SERVICE);
        }
    },
    mounted() {
        let _this = this;
        this.$init.subPageInit(this);
        $("#initInsure").click(function () {
            if (_this.insureType == "1") {
                _this.einvForm.invoiceTitle = _this.order.findEinvData.AppliName;
            } else {
                _this.einvForm.invoiceTitle = _this.order.findEinvData.InsuredName;
            }
        });
        if (this.order.seleOrder.riskCode == "3105" || this.order.seleOrder.riskCode == "2726") {
            this.einvForm.isModify = '1';
            this.isInvoice = false;
        } else {
            this.isInvoice = true;
            this.einvForm.isModify = '0';
        }

        setTimeout(function () {
            _this.einvForm.invoiceTitle = _this.order.findEinvData.AppliName;
        }, 0);
        $("body").css("overflow-y", "hidden");
    },
}
</script>


<style lang="scss">
.einv-btn {
  margin-top: 20px;
  float: right;
  margin-right: 20px;
}

.order__list--title {
  float: left;
  font-size: 15px;
  color: #C8161D;
  border-top: 1px solid #fff;
}

.einv_input {
  width: 70px;
}

.order__iconspan {
  position: absolute;
  margin-top: 3px;
  width: 4px;
  height: 18px;
  background-color: #C8161D;
}

.checked__class {
  padding: 10px;
  font-size: 15px;
}

.order__iconspan--title {
  margin-left: 9px;
  font-size: 16px;
}

.order__Einv--title {
  border-top: 1px solid #fff;
  margin-left: -8px;
}

.order__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 5px;
}

.order__formPolicy--group {
  // padding: 0px 10px; // .vux-no-group-title {
  //     padding-bottom: 20px;
  // }
}

.order__input {
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.dialog__Einv--div {
  margin-top: -7px;
}

.dialog__Einv--btn {
  // float: right;
  // margin-right: 13px;
}
</style>






